<template>

  <div style="background-color: #eeeeee;height:932px">
    <van-nav-bar
        title="选择套餐"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-notice-bar scrollable text="购买套餐即可在1个月内,享受换电的资格，次数不限！！！" />
<!--    <van-divider>选择电池电压</van-divider>-->
<!--    <hr>-->
<!--    &lt;!&ndash;    <van-divider>车+电池</van-divider>&ndash;&gt;-->
<!--    &lt;!&ndash;    优惠券选项页面&ndash;&gt;-->
<!--    &lt;!&ndash;电池功率选择&ndash;&gt;-->

<!--    <van-radio-group v-model="checked">-->
<!--      <van-radio name="11" style="float: left" model-value="48">48V</van-radio>-->
<!--      <van-radio name="22" style="margin-left: 300px" model-value="60">60V</van-radio>-->
<!--    </van-radio-group>-->
<!--    <hr>-->
<!--    <van-divider>选择套餐时长</van-divider>-->
<!--    <hr>-->
<!--&lt;!&ndash;      <span> <input type="radio" name="radio"/>6666</span>&ndash;&gt;-->
<!--&lt;!&ndash;      <van-button plain type="primary"style="margin-left: 50px">一个月</van-button>&ndash;&gt;-->
<!--&lt;!&ndash;      <van-button plain type="primary"style="margin-left: 160px">三个月</van-button>&ndash;&gt;-->
<!--&lt;!&ndash;      <br>&ndash;&gt;-->
<!--&lt;!&ndash;      <van-button plain type="primary"style="margin-left: 50px">六个月</van-button>&ndash;&gt;-->
<!--&lt;!&ndash;      <van-button plain type="primary"style="margin-left: 160px">一年</van-button>&ndash;&gt;-->
<!--      <van-radio-group v-model="checkedd">-->
<!--        <van-radio name="1" style="float: left; font-size: 20px" model-value="30">一个月</van-radio>-->
<!--        <van-radio name="2" style="margin-left: 300px; font-size: 20px">三个月</van-radio>-->
<!--        <van-radio name="3" style="float: left; font-size: 20px">六个月</van-radio>-->
<!--        <van-radio name="4" style="margin-left: 300px; font-size: 20px">一年</van-radio>-->
<!--      </van-radio-group>-->
<!--    <van-divider>查看我的车是否适配电池</van-divider>-->
<!--    <van-image-->
<!--        width="570"-->
<!--        height="269"-->
<!--        src="https://gxylnews.com.cn/xwk/ms/202109/W020211127587851272951_1000.jpg"-->
<!--        @click="tc"-->
<!--    />-->
<!--&lt;!&ndash;    是否为改装电瓶车&ndash;&gt;-->
<!--    <span style="font-size: 18px"> <input type="radio" name="radio"/>改装电瓶车</span>-->
<!--&lt;!&ndash;    底部支付按钮跳转&ndash;&gt;-->
<!--&lt;!&ndash;    <van-action-bar>&ndash;&gt;-->
<!--&lt;!&ndash;      <van-action-bar-icon text="购买即同意《充电吧使用条款》"/>&ndash;&gt;-->
<!--&lt;!&ndash;      <van-action-bar-icon />&ndash;&gt;-->
<!--&lt;!&ndash;      <van-action-bar-icon />&ndash;&gt;-->
<!--&lt;!&ndash;      <van-action-bar-button type="danger" text="立即购买" @click="handlePay" />&ndash;&gt;-->
<!--&lt;!&ndash;    </van-action-bar>&ndash;&gt;-->
<!--    <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit"/>-->
<!--    <el-table :data="tableData" style="width: 100%">-->
<!--      <el-table-column type="index" width="70"  label="序号"/>-->
<!--      <el-table-column  property="batteryName" label="名称" width="150"/>-->
<!--      <el-table-column property="batteryPrice" label="价格"  />-->
<!--      <el-table-column property="batteryTypeName" label="功率" />-->
<!--      <el-table-column #default="scope">-->
<!--        <el-button>选择</el-button>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
    <van-card v-for="item in tableData"
              :price="item.batteryPrice"
              :desc="item.batteryBrand"
              :title="item.batteryName"
              thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
    >
      <template #footer >
        <van-button size="mini" type="danger" @click="toBuy(item)">购买</van-button>
      </template>
    </van-card>

  </div>

<!--  <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" />-->

  <van-dialog v-model:show="show" title="确认订单" show-cancel-button confirmButtonText="提交" @confirm="add()">
    <van-cell-group>
      <van-cell title="电池名称" :value="addForm.batteryName" />
      <van-cell title="电池品牌" :value="addForm.batteryBrand" />
      <van-cell title="套餐金额" :value="addForm.batteryPrice" />
    </van-cell-group>
  </van-dialog>
</template>
<script setup>
import {useRouter} from "vue-router";
const route = useRouter()
import { ref } from 'vue';
import {Van} from "@element-plus/icons-vue";
import { ElTable } from 'element-plus'
import * as url from "node:url";
import {batteryTypeList} from "@/api/Map.js";
import {addDataSarify} from "@/api/site.js";
import {showNotify} from "vant";
const onClickLeft = () => {
  // 返回上一页
  route.push('/purse')
}
const price=ref(0);
// const handleSelectionChange = (val) => {
//   price.value=0
//   console.log(val)
//   addForm.value=val;
//   val.forEach(item => {
//     price.value+=item.batteryPrice
//   })
//   price.value=price.value*100
// }
// 优惠券页面
// 电池功率选择
// const checked = ref('');
// const checkedd = ref('');
//跳转支付页面
// const onSubmit = () => {
//   route.push('/alipay')
// }
const battery = ref({
  batteryName:'',
  batteryPrice:'',
  batteryType:''
})
const addForm=ref()
const tableData = ref([])
const batteryList = async () => {
  const {code,message,data}=await batteryTypeList()
  if (data.code==200){
    tableData.value=data.data
    tableData.value.forEach(item => {
      item.batteryPrice=item.batteryPrice*10
    })
  }
}
onMounted(() => {
  batteryList();
})

const toBuy = (row) =>{
  show.value=true;
  addForm.value=row;
}
const add=async ()=>{
  addForm.value.createTime=null;
  const {data}=await addDataSarify(addForm.value);
  if(data.code==200){
    showNotify({ type: 'primary', message: '购买成功' });
  }else{
    showNotify({ type: 'danger', message: '购买失败' });
  }
}
const show = ref(false);
</script>
